<template>
  <div class="mine-contain">
    <!-- 顶部用户信息 -->
    <div class="userWelcome">
      <div class="userInfo">
        <!-- 用户头像 -->
        <div class="userHeadImg">
          <img
            :src="require('../../assets/' + user.userHeadImg)"
            v-if="(this.user.userHeadImg !== '') & hasLogin"
          />
          <p v-if="hasLogin">暂无头像</p>
        </div>
        <!-- 头像旁信息 -->
        <div class="welInfo">
          <!-- 未登录的信息 -->
          <h1 v-if="!hasLogin">
            <router-link to="/login">您未登录，请先登录</router-link>
          </h1>
          <!-- 登录后的欢迎信息 -->
          <div class="detailInfo" v-else>
            <h3>欢迎您，{{ user.userName }}</h3>
            <p>班级：{{ user.userClass }}</p>
            <p>年级：{{ user.userGrade }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="toolList">
      <Tool
        v-for="item in toolList"
        :key="item.id"
        :title="item.title"
        :toPath="item.toPath"
      ></Tool>
    </div>
  </div>
</template>

<script>
import Tool from "@/components/toolList.vue";
import axios from "axios";
export default {
  data() {
    return {
      // 用户头像
      user: {
        userHeadImg: "userhead.jpg",
        // 用户基础信息
        userName: "ming",
        userClass: "软件工程",
        userGrade: "2018",
      },
      // 登录标志
      hasLogin: false,
      // 底部功能列表
      toolList: [],
      // 登陆后的功能列表
      loginedTool: [
        { id: 1, title: "校历", toPath: "/calendar" },
        { id: 2, title: "请假审批", toPath: "/leave" },
        { id: 3, title: "考试安排", toPath: "/testing" },
        { id: 4, title: "课程表查询", toPath: "/schedul" },
        { id: 5, title: "退出登录", toPath: "" },
      ],
      // 没有登陆的功能列表
      noLoginedTool: [
        { id: 1, title: "校历", toPath: "/calendar" },
        { id: 2, title: "请假审批", toPath: "/leave" },
        { id: 3, title: "考试安排", toPath: "/testing" },
        { id: 4, title: "课程表查询", toPath: "/schedul" },
        { id: 5, title: "立即登录", toPath: "/login" },
      ],
    };
  },
  components: {
    Tool,
  },
  watch: {
    hasLogin: {
      handler(newState) {
        if (newState === true) {
          this.toolList = this.loginedTool;
        } else {
          this.toolList = this.noLoginedTool;
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 判断是否登录
    islogin() {
      const token = localStorage.getItem("Token");
      if (token) {
        return true;
      } else {
        return false;
      }
    },
    //获取用户信息
    async getUserInfo() {
      const { data } = await axios({
        url: "/getUserInfo",
        method: "GET",
      });
      if (data.status === 200) {
        this.user.userClass = data.data.class;
        this.user.userName = data.data.name;
        this.user.userGrade = data.data.grade;
      }
    },
  },
  created() {
    this.hasLogin = this.islogin();
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.mine-contain {
  height: calc(100vh - 50px);
  padding-bottom: 60px;
  .userWelcome {
    display: flex;
    align-items: center;
    height: 40vh;
    background-color: orange;
    .userInfo {
      display: flex;

      .userHeadImg {
        margin-left: 5vw;
        height: 30vw;
        width: 30vw;
        border-radius: 50%;
        text-align: center;
        line-height: 30vw;
        background-color: rgb(117, 117, 117);
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .welInfo {
        display: flex;
        align-items: center;
        margin-left: 5vw;
        height: 30vw;
        h1 {
          font-size: 20px;
          a {
            color: black !important;
          }
        }
      }
    }
  }
}
</style>
